<template>
  <div class='right'>
    <div class="nav">
      <div class="searchClass inline-block mr-[10px] mb-[10px]">
        <el-input v-model="searchParams.blurry"
          placeholder="输入名称或者邮箱搜索"
          class="w-[200px] focus:(border-[#409EFF])"></el-input>
      </div>
      <div class="searchClass inline-block mr-[10px] mb-[10px]">
          <el-date-picker
            v-model="searchParams.createTime"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
      </div>
      <div class="searchClass inline-block mr-[10px] mb-[10px]">
        <el-select class="w-[90px]" v-model="searchParams.enabled" placeholder="状态" >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="searchBtn inline-block mb-[10px]">
        <el-button type="primary" size="small"
          class="bg-[#13ce66] border-[#13ce66]
          hover:(bg-[#13ce66] border-[#13ce66])
          focus:(bg-[#13ce66] border-[#13ce66])"
          icon="el-icon-search" @click="getuserList">搜索</el-button>
        <el-button type="warning" size="small"
          class="bg-[#ffba00] border-[#ffba00]
          hover:(bg-[#ffba00] border-[#ffba00])
          focus:(bg-[#ffba00] border-[#ffba00])"
          icon="el-icon-refresh-left" @click="resetUser">重置</el-button>
      </div>
      <div class="searchBtn">
        <el-button type="warning" size="small"
          class="bg-[#1890FF] border-[#1890FF]
          hover:(bg-[#1890FF] border-[#1890FF])
          focus:(bg-[#1890FF] border-[#1890FF])"
          icon="el-icon-plus" @click="adduser" v-permission="['user:add', 'admin']">新增</el-button>
          <el-button type="warning" size="small"
          class="bg-[#89e7b3] border-[#89e7b3]
          hover:(bg-[#89e7b3] border-[#89e7b3])
          focus:(bg-[#89e7b3] border-[#89e7b3])"
          icon="el-icon-edit" v-permission="['user:edit']">修改</el-button>
          <el-button type="warning" size="small"
          class="bg-[#ffa4a4] border-[#ffa4a4]
          hover:(bg-[#ffa4a4] border-[#ffa4a4])
          focus:(bg-[#ffa4a4] border-[#ffa4a4])"
          icon="el-icon-delete" v-permission="['user:del']">删除</el-button>
          <el-button type="warning" size="small"
          class="bg-[#ffba00] border-[#ffba00]
          hover:(bg-[#ffba00] border-[#ffba00])
          focus:(bg-[#ffba00] border-[#ffba00])"
          icon="el-icon-download">导出</el-button>
      </div>
      <div class="mb-[10px]">
        <el-table :data="tableData" style="width: 100%" :header="deptId">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="username" label="用户名" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="nickName" label="昵称" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column prop="gender" label="性别" width="60" align="center"></el-table-column>
          <el-table-column prop="phone" label="电话" width="120"></el-table-column>
          <el-table-column prop="email" label="邮箱" show-overflow-tooltip width="180"></el-table-column>
          <el-table-column prop="dept.name" label="部门" width="100"></el-table-column>
          <el-table-column prop="name" label="状态" width="60">
          <template slot-scope="scope">
            <!-- switch input 这种类型的值，是绑定的返回是数据的具体内容
            而不是全局的固定值 -->
            <el-switch v-model="scope.row.enabled"
            active-color="#1890ff" inactive-color="#ff4949"
            @change="changeSwitch(scope)"></el-switch>
          </template>
          </el-table-column>
          <el-table-column prop="createTime" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button
              class="sbtn1"
              size="mini"
              icon="el-icon-edit"
              v-permission="['user:edit', 'admin']"
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              class="sbtn2"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              v-permission="['user:del', 'admin']"
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages.size"
          layout="total, prev, pager, next, sizes"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 修改和新增弹出层是公用的，所以会出现内容不销毁的情况，
         可以对 子组件 使用v-if 的方式，重建子组件。 -->
    <Adduser ref="Adduser" @handelSuccess="resetUser"></Adduser>
  </div>
</template>
<script>
import { getUser, putUser } from '@/api/user'
import Adduser from './adduser.vue'
// 全局 声明searchParams
const searchParams = {
  blurry: null, // 模糊搜索
  enabled: null, // 状态
  createTime: [], // 日期
  deptId: '' // 部门id
}
export default {
  name: 'Right',
  data () {
    return {
      searchParams: Object.assign({}, searchParams),
      input: null,
      options: [
        { label: '激活', value: '1' },
        { label: '锁定', value: '0' }
      ],
      // 列表展示
      tableData: [],
      // 总条数
      total: 0,
      // 分页参数
      pages: {
        page: 1, // 当前页的页码
        size: 10 // 一页展示多少条
      },
      deptId: ''
    }
  },
  components: {
    Adduser
  },
  computed: {},
  watch: {
    '$store.state.deptId': {
      deep: true,
      handler (newValue) {
        this.searchParams.deptId = newValue
        this.getuserList()
      }
    }
  },
  mounted () {
    this.getuserList()
  },
  methods: {
    async getuserList () {
      const params = {
        ...this.searchParams,
        ...this.pages,
        page: this.pages.page - 1,
        // sort: 'id,asc',
        sort: 'id,desc'
      }
      const { content, totalElements } = await getUser(params)
      this.tableData = content
      this.total = totalElements
    },
    // 重置
    resetUser () {
      this.searchParams = Object.assign({}, searchParams) // 拷贝searchParams
      this.getuserList()
    },
    // 编辑
    handleEdit (index, row) {
      this.$refs.Adduser.open(true, row)
    },
    // 删除
    handleDelete () {},
    // 修改每页条数
    handleSizeChange (val) {
      this.pages.page = val
      this.getuserList()
    },
    // 修改当前页
    handleCurrentChange (val) {
      this.pages.page = val
      this.getuserList()
    },
    // 状态切换
    // async要写在最靠近 promise最近的 函数前边
    changeSwitch ({ row }) {
      this.$confirm(`此操作将"${row.enabled ? '激活' : '禁用'}"${row.username}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await putUser(row)
        this.$message.success('修改成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
        row.enabled = !row.enabled
      })
    },
    // 控制弹出层显示
    adduser () {
      this.$refs.Adduser.open()
    },
    isShow () {
      const roles = JSON.parse(localStorage.getItem('roles'))
      roles.forEach(item => {
        item()
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.right {
  flex: 1; // 房前元素占据整个页面的宽
  width: calc(100% - 200px); // 计算方法，全部 - 左侧的宽度
}
.searchClass {
  .el-range-editor {
    width: 270px;
  }
  ::v-deep .el-range-separator {
    padding: 0px;
    width: auto;
  }
}
.sbtn1 {
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
}
.sbtn2 {
  color: #fff;
  background-color: #ff4949;
  border-color: #ff4949;
}
</style>
